<script lang="ts" setup>
  import { watch, ref } from 'vue';
  import { useRouter, RouterView, useRoute } from 'vue-router';
  import type { UserInfoResult } from '/@/api/model/userModel';
  import { getAppUserInfo } from '/@/api/user';
  import IconBadge from '/@/assets/user/badge.svg';
  import IconOccupation from '/@/assets/user/occupation.svg';
  import IconCompany from '/@/assets/user/company.svg';
  import IconIntroduce from '/@/assets/user/introduce.svg';

  interface CreatorMenu {
    title: string;
    key?: string;
    icon?: any;
    children?: CreatorMenu[];
  }

  const menus: CreatorMenu[] = [
    { title: '文章', key: 'USER_POSTS' },
    {
      title: '专栏',
      key: 'USER_COLUMNS',
    },
    {
      title: '星点',
      key: 'USER_PINS',
    },
    {
      title: '关注',
    },
    {
      title: '点赞',
    },
  ];

  const menuMap = new Map();
  const router = useRouter();
  const route = useRoute();
  const user_id = ref<number>();
  const userInfo = ref<UserInfoResult>();

  const selectedKeys = ref<string[]>([]);

  travelMenus(menus);

  watch(
    router.currentRoute,
    ({ matched }) => {
      const matchedMenu = findMatchedMenu(matched);
      if (matchedMenu) {
        selectedKeys.value = [matchedMenu.key];
      }
    },
    { immediate: true },
  );
  watch(
    () => selectedKeys.value[0],
    (name) => {
      if (name !== router.currentRoute.value.name) {
        router.push({ name });
      }
    },
  );

  watch(
    () => route.params.id,
    (id) => {
      user_id.value = parseInt(Array.isArray(id) ? id[0] : id, 10) ?? 0;
    },
    { immediate: true },
  );

  watch(
    [user_id],
    async ([user_id]) => {
      if (user_id) {
        userInfo.value = await getAppUserInfo({ id: user_id });
      }
    },
    { immediate: true },
  );

  function travelMenus(menus) {
    menus.forEach((item) => {
      if (!item.children) {
        menuMap.set(item.key, item);
      } else {
        travelMenus(item.children);
      }
    });
  }

  function findMatchedMenu(matched) {
    for (const item of matched) {
      if (menuMap.has(item.name)) {
        return menuMap.get(item.name);
      }
    }
  }
</script>

<template>
  <div class="mx-[40px]">
    <a-row :gutter="20">
      <a-col :span="18">
        <a-card :bordered="false" class="px-[10px] py-[7px]">
          <a-row class="border-b border-b-[#f1f1f1] pb-[13px]">
            <a-col :span="3">
              <a-avatar class="mr-[8px]" :size="68" :image-url="userInfo?.icon" />
            </a-col>
            <a-col :span="15">
              <div class="text-[20px] font-[900]">{{ userInfo?.name }}</div>
              <div class="container flex items-center mt-[5px]" v-if="userInfo?.occupation">
                <img :src="IconOccupation" class="w-[23px] h-[25px]" />
                <span class="pl-[3px]"> {{ userInfo?.occupation }}</span>
              </div>
              <div v-if="userInfo?.company" class="container flex items-center mt-[5px]">
                <img :src="IconCompany" class="w-[20px] h-[20px] ml-[2px]" />
                <span class="pl-[3px]"> {{ userInfo?.company }}</span>
              </div>

              <div class="container flex items-center mt-[5px]" v-if="userInfo?.introduce">
                <img :src="IconIntroduce" class="w-[18px] h-[20px] ml-[2px]" />
                <span class="ml-[4px]"> {{ userInfo?.introduce }}</span>
              </div>
            </a-col>
            <a-col :span="6">
              <a-row class="mt-[80px]">
                <a-col :span="12" class="text-right">
                  <a-button type="primary">
                    <template #icon>
                      <icon-plus />
                    </template>
                    <template #default>关注</template>
                  </a-button>
                </a-col>
                <a-col :span="12" class="text-right">
                  <a-button type="outline">
                    <template #icon>
                      <icon-email />
                    </template>
                    <template #default>私信</template>
                  </a-button>
                </a-col>
              </a-row>
            </a-col>
          </a-row>
          <a-row class="mt-[13px]">
            <a-col :span="1"><img :src="IconBadge" /></a-col>
            <a-col :span="19" class="text-[14px mt-[4px] font-[600] text-[#1d2129]"
              >获得SBT 0</a-col
            >
            <a-col :span="4" class="mt-[5px]">
              <a-row>
                <a-col :span="20"> <icon-email /></a-col>
                <a-col :span="4"><icon-right class="text-[#1d2129] text-[16px]" /></a-col>
              </a-row>
            </a-col>
          </a-row>
        </a-card>

        <a-card :bordered="false" class="mt-[15px] user-card">
          <a-menu
            mode="horizontal"
            v-model:selectedKeys="selectedKeys"
            autoOpen
            :levelIndent="30"
            class="user-menu"
          >
            <a-menu-item v-for="item in menus" :key="item.key" class="text-[16px]">{{
              item.title
            }}</a-menu-item>
          </a-menu>
        </a-card>
        <RouterView class="mt-[10px]" />
      </a-col>
      <a-col :span="6">
        <a-card :bordered="false">
          <a-row class="text-center">
            <a-col :span="12" class="border-r border-b-[#f1f1f1]">
              <div class="text-[16px] font-[800] text-[#31445b]">关注了</div>
              <div class="text-[16px] font-[800] text-[#31445b]">10</div>
            </a-col>
            <a-col :span="12">
              <div class="text-[16px] font-[800] text-[#31445b]">关注者</div>
              <div class="text-[16px] font-[800] text-[#31445b]">10</div>
            </a-col>
          </a-row>
        </a-card>
        <a-card title="我的标签" :bordered="false" class="mt-[15px]">
          <a-row :gutter="20">
            <a-col :span="6" v-for="i in 9" :key="i" class="mb-[10px]">
              <a-tag checkable color="arcoblue" :default-checked="true">Web3</a-tag>
            </a-col>
          </a-row>
        </a-card>

        <a-card title="NFT" :bordered="false" class="mt-[15px]">
          <a-row :gutter="20">
            <a-col :span="8" v-for="i in 4" :key="i">
              <a-image
                width="100%"
                src="https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/a8c8cdb109cb051163646151a4a5083b.png~tplv-uwbnlip3yd-webp.webp"
              />
            </a-col>
          </a-row>
        </a-card>
        <a-card :bordered="false" class="mt-[15px]">
          <a-row>
            <a-col :span="18">关注标签</a-col>
            <a-col :span="6" class="text-right">10</a-col>
          </a-row>
          <a-row class="mt-[15px]">
            <a-col :span="16">加入时间</a-col>
            <a-col :span="8" class="text-right">2021-01-23</a-col>
          </a-row>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>
<style scoped>
  .user-card >>> .arco-card-body {
    padding: 0px !important;
  }

  .user-menu >>> .arco-menu-inner {
    padding: 14px 0px !important;
  }
</style>
